<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="component/pear/css/pear.css" />
		<link rel="stylesheet" href="css/layer-css.css" />
		<style>
			.img {
				background-image: url(./images/backgroundImage.png);
				width: 100%;
				height: 300px;
				/* object-fit: cover; */
				/* background-repeat: no-repeat; */
				background-position: center;
				background-size: cover;
			}

			.searchFrom .layui-input {
				height: 45px;
				background: #FFFFFF;
				font-size: 18px;
				border-radius: 20px 20px 20px 20px !important
			}

			.layui-input-suffix {
				padding-right: 38px !important;
			}

			.layui-icon-search {
				font-size: 25px !important;
				line-height: 45px !important;
			}

			.layui-table-box * {
				font-size: 14px !important;
			}

			.layui-table tr {
				height: 50px;
				line-height: 50px;
			}

			.layui-table {
				width: 100% !important;
			}

			.layui-table-view {
				padding-bottom: 60px !important;
				background-color: #fff;
			}

			.layui-table-page {
				height: 50px !important;
				background-color: #fff;
			}

			.layui-laypage span {
				font-size: 16px;
			}

			.layui-laypage a {
				font-size: 15px;
			}

			.layui-laypage select {
				border: 1px solid #e6e3e3d6 !important;
				height: 20px;
			}
		</style>
		<script>
			document.addEventListener('touchstart', function() {
				return false;
			}, true);
			// 禁止选择
			document.oncontextmenu = function() {
				return false;
			};
			// H5 plus事件处理
			function plusReady() {
				// openPrivacy();
				// Android处理返回键
				plus.key.addEventListener('backbutton', function() {
					('iOS' == plus.os.name) ? plus.nativeUI.confirm('确认退出？', function(e) {
						if (e.index > 0) {
							plus.runtime.quit();
						}
					}, 'HelloH5', ['取消', '确定']): (confirm('确认退出？') && plus.runtime.quit());
				}, false);
				// 关闭启动界面
				plus.navigator.setStatusBarBackground('#7fbeff');
				setTimeout(function() {
					plus.navigator.closeSplashscreen();
				}, 200);
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
		</script>
	</head>

	<body style="background-color: #c3d7ec78;">
		<div class="img" id="pullrefresh">
			<div style="margin: 0px 10px;"">
			<div style=" padding-top: 150px;">
				<form class="layui-form searchFrom"  lay-filter="form-filter"  action="" onsubmit="return false">
					<div class="layui-input-wrap">
						<input type="text" lay-affix="layui-icon layui-icon-search" lay-filter="fileName"
							name="fileName" placeholder="文件名称" class="layui-input">
					</div>
				</form>
			</div>
			<table id="archives-table" lay-filter="archives-table"></table>
		</div>
		<script type="text/html" id="validArchives-bar">
			<button plain class="pear-btn pear-btn-success pear-btn-xs" lay-event="takeOut">取出档案</button>&nbsp;&nbsp;
		</script>
		<script src="js/util.js"></script>
		<script src="js/layui/layui.js"></script>
		<script src="component/pear/pear.js"></script>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			var table = null;
			// 测试网络
			$.ajax({
				url: "http://192.168.0.201:9010/api/testNetwork",
				type: "GET",
				timeout: '3000',
				success: function(datas) {
					console.log(datas);
				},
				error: function(e) {
					layer.msg('连接服务器失败');
				}
			})
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					// up: {
					// 	contentrefresh: '正在加载...',
					// 	callback: pullupRefresh
					// }
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				table.reload('archives-table', {
					page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
						// layout: ['limit', 'count', 'prev', 'page', 'next'], //自定义分页布局
						layout: ['prev', 'page', 'next', 'count', 'limit'], //自定义分页布局
						groups: 3, //只显示 1 个连续页码
						first: false, //不显示首页
						last: false, //不显示尾页
						curr: 1
					},
					done: function(res, curr, count) {
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
						mui.toast('下拉刷新成功');
					}
				})

			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					console.log(2);
				}, 1000);
			}
			layui.use(['table', 'form', 'jquery', 'common', 'dtree'], function() {
				table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let dtree = layui.dtree;
				let common = layui.common;
				let cols = [
					[{
							title: '文件名',
							field: 'file_name',
							align: 'center',
							width: 120
						},
						{
							title: '层',
							field: 'current_layer',
							align: 'center',
							sort: true,
						},
						{
							title: '列',
							field: 'current_column',
							align: 'center',
							sort: true
						},
						{
							title: '操作',
							align: 'center',
							width: 80,
							templet: function(d) {
								if (d.status == 0) {
									return '<button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="takeOut">取出</button>';
								} else {
									return '<button class="pear-btn pear-btn-xs" style="border: 1px solid #ffc107;background-color: #FFC107 !important;' +
										'color: #fff !important;" lay-event="returnFile">归还</button>'
								}
							}
						}
					]
				]


				tableIns = table.render({
					elem: '#archives-table',
					url: 'http://192.168.0.201:9010/api/getArchiveList',
					// page: true,
					page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
						// layout: ['limit', 'count', 'prev', 'page', 'next'], //自定义分页布局
						layout: ['prev', 'page', 'next', 'count', 'limit'], //自定义分页布局
						groups: 3, //只显示 1 个连续页码
						first: false, //不显示首页
						last: false //不显示尾页
					},
					cols: cols,
					skin: 'line',
					id: 'archives-table',
					// height: 'full-173',
					//解决页码的问题
					done: function(res) {
						// 获得当前页码
						var brforeCurr = tableIns.config.page.curr;
						// 获得当前页的记录数
						var dataLength = table.cache['archives-table'].length;
						var count = res.count; // 获得总记录数
						//如果当前页的记录数为0并且总记录数不为0
						if (dataLength == 0 && count != 0) {
							// 刷新表格到上一页
							table.reload("archives-table", {
								page: {
									curr: brforeCurr - 1
								}
							});
						}
					}
				});
				form.on('input-affix(fileName)', function(data) {
					var elem = data.elem;
					table.reload('archives-table', {
						where: {
							"searchData": elem.value
						}
					})
				});

				$(".layui-input").blur(function(event) {
					var inputKey = $(this).val();
					table.reload('archives-table', {
						where: {
							"searchData": inputKey
						}
					})
				});


				table.on('tool(archives-table)', function(obj) {
					if (obj.event === 'takeOut') {
						window.takeOut(obj);
					} else if (obj.event === 'returnFile') {
						window.returnFile(obj);
					}
				})

				// 取出档案
				window.takeOut = function(obj) {
					layer.confirm('<div>确定要取出&nbsp;&nbsp;<span style="color: #FF9200;">' + obj.data.file_name +
						'</span>&nbsp;&nbsp;档案吗?</div>', {
							icon: 3,
							title: ['提示', 'font-size: 18px;'],
							shade: 0.5,
							shadeClose: true,
							area: ['90%', '30%'],
							id: "borrowingConfirm"
						},
						function(index) {
							layer.close(index);
							$.ajax({
								url: 'http://192.168.0.201:9010/api/takeOutArchive',
								data: JSON.stringify({
									"id": obj.data.id
								}),
								dataType: 'json',
								contentType: "application/json;charset=utf-8",
								type: 'post',
								success: function(result) {
									if (result.code === 200) {
										layer.msg(result.message, {
											icon: 1,
											time: 1800
										}, function() {
											layui.table.reload("archives-table");
										});
									} else {
										layer.msg(result.message, {
											icon: 2,
											time: 1800
										});
									}
								}
							})
						})
				};
				// 归还档案
				window.returnFile = function(obj) {
					layer.confirm('<div>确定要归还&nbsp;&nbsp;<span style="color: #FF9200;">' + obj.data.file_name +
						'</span>&nbsp;&nbsp;档案吗?</div>', {
							icon: 3,
							title: ['提示', 'font-size: 18px;'],
							shade: 0.5,
							shadeClose: true,
							area: ['90%', '30%'],
							id: "borrowingConfirm"
						},
						function(index) {
							layer.close(index);
							$.ajax({
								url: 'http://192.168.0.201:9010/api/returnArchive',
								data: JSON.stringify({
									"id": obj.data.id
								}),
								dataType: 'json',
								contentType: "application/json;charset=utf-8",
								type: 'post',
								success: function(result) {
									if (result.code === 200) {
										layer.msg(result.message, {
											icon: 1,
											time: 1800
										}, function() {
											layui.table.reload("archives-table");
										});
									} else {
										layer.msg(result.message, {
											icon: 2,
											time: 1800
										});
									}
								}
							})
						})
				};
				document.addEventListener('keypress', function(event) {
				    if (event.key === 'Enter') {
						var data = form.val('form-filter');
						document.activeElement.blur();
				        // 执行提交操作
				        table.reload('archives-table', {
				        	where: {
				        		"searchData": data.fileName
				        	}
				        })
				    }
				});
			})
		</script>
		<script type="text/javascript">
			(function() {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				mui.plusReady(function() {
					var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, []);
					// append 到父webview中
					self.append(drawNativeIcon);
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);

					var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;


					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if (clientX > 0 && clientX <= parseInt(pageW * 0.50)) {
							console.log("index1");
							currIndex = 0;
						} else if (clientX > parseInt(pageW * 0.50) && clientX <= parseInt(pageW * 1)) {
							currIndex = 1;
							console.log("index2");
						}
						// else if (clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
						// currIndex = 2;
						// } else {
						// currIndex = 3;
						// }
						// 匹配对应tab窗口	
						console.log("currIndex " + currIndex);
						if (currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}
						console.log("targetPage " + currIndex);
						if (targetPage == activePage) {
							return;
						}

						if (currIndex !== 3) {
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						} else {
							//第四个tab 打开新窗口
							plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 200);
						}
					});
				});
			})();
		</script>
	</body>

</html>